<template>
    <div class="avatar">
        <img src="../../assets/default-avatar.png" alt="">
        <div>
            <h2>admin</h2>
            <p>18300000000</p>
        </div>
    </div>
      <!-- 底部导航 -->
  <van-tabbar v-model="active">
    <van-tabbar-item to="/" icon="home-o">首页</van-tabbar-item>
    <van-tabbar-item to="/type" icon="search">分类</van-tabbar-item>
    <van-tabbar-item icon="friends-o">标签</van-tabbar-item>
    <van-tabbar-item to="/my" icon="setting-o">我的</van-tabbar-item>
  </van-tabbar>
  <h1>其它链接功能</h1>
  <router-link to="/wallet">我的钱包</router-link>
  <button @click="onDel">删除提示</button>
</template>

<script setup>
import { ref } from 'vue';
import { showConfirmDialog } from 'vant';
const active = ref(3);

const onDel = ()=>{
    showConfirmDialog({
        title: '标题',
        message:
            '如果解决方法是丑陋的，那就肯定还有更好的解决方法，只是还没有发现而已。',
        })
        .then(() => {
            // on confirm
            console.log("确定");
        })
        .catch(() => {
            // on cancel
            console.log("取消");
        });
    }
</script>

<style scoped>
.avatar{
    background-image: url(../../assets/user-header-bg.png);
    background-size: 100% 100%;
    padding: 40px 13px;
    display: flex;
    align-items: center;
    color: #C59B52;
}
.avatar img{
    height: 50px;
    margin-right: 15px;
    border-radius: 50%;
}
</style>